<template>
  <el-row :gutter="10" type="flex">
    <!-- 控件面板 -->
    <el-col :md="6" :sm="12" :xs="24" :style="pannelList[0]">
      <el-space direction="vertical" fill>
        <upload-file-pannel></upload-file-pannel>

        <download-file-pannel></download-file-pannel>
      </el-space>
    </el-col>
    <!-- 算法面板 -->
    <el-col :md="6" :sm="12" :xs="24" :style="pannelList[1]">
      <algorithm-pannel></algorithm-pannel>
    </el-col>
    <!-- 地图面板 -->
    <el-col :md="12" :sm="24" :xs="24" :style="pannelList[2]">
      <leaflet-map-pannel></leaflet-map-pannel>
    </el-col>
  </el-row>
</template>

<script>
import UploadFilePannel from '@/views/console/console-pannel/UploadFilePannel.vue';
import LeafletMapPannel from '@/views/console/console-pannel/LeafletMapPannel.vue';
import DownloadFilePannel from '@/views/console/console-pannel/DownloadFilePannel.vue';
import AlgorithmPannel from './console-pannel/AlgorithmPannel.vue';
export default {
  data() {
    return {
      screenWidth: window.innerWidth, //获取屏幕宽度
    };
  },
  computed: {
    pannelList() {
      // 根据尺寸的变化调整面板元素位置
      return this.screenWidth >= 768 && this.screenWidth < 992
        ? [{ order: 1 }, { order: 2 }, { order: 3 }]
        : [{ order: 1 }, { order: 3 }, { order: 2 }];
    },
  },
  mounted() {
    window.addEventListener('resize', this.handleResize); //监听屏幕宽度变化
    this.handleResize(); // 初始化时调用一次
  },
  methods: {
    handleResize() {
      this.screenWidth = window.innerWidth;
    },
  },
  components: {
    UploadFilePannel,
    LeafletMapPannel,
    DownloadFilePannel,
    AlgorithmPannel,
  },
};
</script>

<style lang="scss" scoped>
// .grid-content {
// }
</style>
